import React, { PureComponent } from 'react';
import { connect } from 'dva';
import PropTypes from "prop-types";
import { filterAuth } from "@/support/common";
import { Modal, Transfer, message, Spin } from 'antd';

const mapStateToProps = (state: any) => ({
    dataPermission: state.dataPermission,
    loading: state.loading.effects['dataPermission/getData'],
});
class RoleTransfer extends PureComponent<any, any> {

    static contextTypes = {
        permissions: PropTypes.array,
    };

    constructor(props: any) {
        super(props);
        this.state = {
            visible: false,
            sid: null,
            saveLoading: false,
            dataList: [],
            targetKeys: [],
            selectedKeys: []
        };
    }

    componentDidMount() {
        this.props.onRef(this);
    }

    open = (sid) => {
        const { dispatch } = this.props;
        dispatch({
            type: 'dataPermission/getData',
            payload: { url: '/datapermission/auth/rolelist',dataPermissionSid:sid },
            callback: (res: any) => {
                let list: any = [];
                let keyList: any = [];
                res.data.map((item: any) => {
                    if (item.refFlag) {
                        keyList.push(item.roleCode);
                    }
                    list.push({
                        key: item.roleCode,
                        title: item.roleName
                    });
                });
                this.setState({
                    sid: sid,
                    dataList: list,
                    targetKeys: keyList
                });
            }
        });
        this.setState({ visible: true });
    }

    close = () => {
        this.setState({
            visible: false,
            sid: null,
            saveLoading: false,
            dataList: [],
            targetKeys: [],
            selectedKeys: []
        });
    }

    save = () => {
        const { dispatch, handleFlushPage } = this.props;
        const { sid, targetKeys } = this.state;
        this.setState({ saveLoading: true });
        dispatch({
            type: 'dataPermission/postObjWithRes',
            payload: { url: '/datapermission/auth/role', dataPermissionSid: sid, roleList: targetKeys },
            callback: (res: any) => {
                this.setState({ saveLoading: false });
                if (res.statusCode === "0") {
                    message.success('保存成功！');
                    this.setState({
                        visible: false,
                        sid: null,
                        dataList: [],
                        targetKeys: [],
                        selectedKeys: []
                    }, () => {
                        handleFlushPage();
                    });
                }
            }
        });
    }

    onChange = (newTargetKeys: any) => {
        const { pathname } = this.props;
        if(filterAuth("dataPermission_doAuthRole", this.context.permissions,pathname)){
            this.setState({ targetKeys: newTargetKeys });
        }
    };

    onSelectChange = (sourceSelectedKeys: any, targetSelectedKeys: any) => {
        const { pathname } = this.props;
        if(filterAuth("dataPermission_doAuthRole", this.context.permissions,pathname)){
            this.setState({ selectedKeys: [...sourceSelectedKeys, ...targetSelectedKeys] });
        }
    }

    render() {
        const { loading,pathname } = this.props;
        const { visible, saveLoading, dataList, targetKeys, selectedKeys } = this.state;
        const hasPermission = filterAuth("dataPermission_doAuthRole", this.context.permissions,pathname);
        return (
            <Modal
                centered
                visible={visible}
                onCancel={this.close}
                onOk={this.save}
                okText='保存'
                destroyOnClose
                confirmLoading={saveLoading}
                cancelButtonProps={{ size: 'small' }}
                okButtonProps={{ size: 'small', disabled: !hasPermission }}
                title="关联角色"
            >
                <Spin spinning={loading}>
                    <Transfer
                        dataSource={dataList}
                        targetKeys={targetKeys}
                        selectedKeys={selectedKeys}
                        onSelectChange={this.onSelectChange}
                        onChange={this.onChange}
                        showSearch
                        titles={['未关联', '已关联']}
                        listStyle={{
                            height: 470,
                        }}
                        render={(item: any) => item.title}
                        pagination
                    />
                </Spin>
            </Modal>
        );
    }
}
export default connect(mapStateToProps)(RoleTransfer);